<template>
  <div class="login-wp">
  	<div class="top">
  		<img class="logo" src="@/assets/image/logo.png"/>
  		<span>AI Assistant</span>
  	</div>
  	<div class="content">
  		<div class="left">
  			<div class="text">“我好像在海边玩耍的孩子，常常为捡到更美丽的贝壳沾沾自喜。”</div>
  			<!-- <div class="text">AI模型调整中，敬请期待。</div> -->
  		</div>
  		<div class="right">
  			<a-form class="t-form" ref="formRef" :model="_d.form" :rules="_d.rules">
	  			
		  		<template v-if="_d.typeIndex == 0">
  					<a-form-item name="code">
	  					<a-input class="ipt" v-model:value="_d.form.code" placeholder="请输入用户名" @keyup.enter="doLogin(0)">
					      <template #prefix>
					        <img class="icon" src="@/assets/image/user2.png"/>
					      </template>
					    </a-input>
					   </a-form-item>
					   <a-form-item name="password">
					    <a-input-password class="ipt" v-model:value="_d.form.password" placeholder="请输入密码" @keyup.enter="doLogin(0)">
					      <template #prefix>
					        <img class="icon" src="@/assets/image/lock.png"/>
					      </template>
					    </a-input-password>
		  			</a-form-item>
  				</template>
  				<template v-else>
	  				<a-form-item name="cellphone">
		  				<a-input class="ipt" v-model:value="_d.form.cellphone" placeholder="请输入手机号" @keyup.enter="doLogin(1)">
					      <template #prefix>
					        <img class="icon" src="@/assets/image/user2.png"/>
					      </template>
					    </a-input>
				    </a-form-item>
				    <a-form-item name="code">
					   	<div class="flex" style="gap: 20px;">
					   		<a-input class="w-0 flex-1 ipt" v-model:value="_d.form.code" placeholder="请输入验证码" autocomplete="off" @keyup.enter="doLogin(1)">
						      <template #prefix>
						        <img class="icon" src="@/assets/image/lock.png"/>
						      </template>
						    </a-input>
						    <a-button class="btn" type="primary" shape="round" :disabled="_d.down.n > 0" @click="downTime">
						    	{{_d.down.n > 0 ? _d.down.n : '发送验证码'}}
						    </a-button>
					   	</div>
		  			</a-form-item>
		  		</template>
	  			<a-form-item class="text-center">
	  				<div class="flex" style="gap: 20px;">
	  					<a-button v-for="(item, index) in _d.typeList" :key="index" class="btn" 
	  						:type="_d.typeIndex == index ? 'primary' : ''" 
	  						shape="round"
	  						:disabled="_d.btnLoading"
	  						@click="doLogin(index)">
	  						{{_d.typeIndex == index ? '登录' : item.label}}
	  					</a-button>
	  				</div>
	  			</a-form-item>
	  		</a-form>

	  		<div class="tip">通过手机验证码登录将自动注册</div>
  		</div>
  	</div>

  	<!-- <div class="content">
  		<img class="logo" src="@/assets/image/logo.png"/>
  		<a-form ref="formRef">
  			<a-form-item v-bind="validateInfos.code">
  				<a-input v-model:value="_d.form.code" placeholder="请输入用户名" @keyup.enter="login">
			      <template #prefix>
			        <img class="icon" src="@/assets/image/user2.png"/>
			      </template>
			    </a-input>
			   </a-form-item>
			   <a-form-item v-bind="validateInfos.password">
			    <a-input-password v-model:value="_d.form.password" placeholder="请输入密码" @keyup.enter="login">
			      <template #prefix>
			        <img class="icon" src="@/assets/image/lock.png"/>
			      </template>
			    </a-input-password>
  			</a-form-item>
  			<a-form-item class="text-center">
  				<a-button :loading="_d.btnLoading" class="sub-btn" type="primary" @click="login()">登录</a-button>
  			</a-form-item>
  			<div class="bt-box">
  				<router-link to="/register" class="btn" type="text">用户注册</router-link>
  				<span class="line"></span>
  				<a class="btn" type="text" href="#" @click="showForget()">忘记密码</a>
  			</div>
  		</a-form>
  	</div>
  	<div class="footer">Terms and Conditions Privacy Policy Copyright Reserved @2023</div> -->

  	<forgetModal ref="forgetModalRef"></forgetModal>
  </div>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import {Form, notification} from "ant-design-vue";
	import forgetModal from "./modules/forgetModal.vue";

	import {ApiPost} from "@/api/request.js";

	import {useRouter} from "vue-router";
	import {useUserStore} from "@/store/userStore.js";
	
	const router = new useRouter();
	const userStore = useUserStore();

	const formRef = ref();
	const forgetModalRef = ref();
	const _d = reactive({
		btnLoading: false,

		typeIndex: 0,
		typeList: [
			{label: '用户名密码登录', api: '/Web/userlogin'},
			{label: '手机验证码登录', api: '/Web/usersmslogin'},
		],

		// 倒计时
		down: {
			t: null,
			n: 0
		},

		form: {
			code: '',
			password: '',
			cellphone: '',
		},
		 rules: {
		 	code: [
		 		{ required: true, validator: (_rule, value) => {
		      if (value === '') {
		        return Promise.reject(_d.typeIndex == 0 ? '请输入用户名' : '请输入验证码');
		      }
		      return Promise.resolve();
		    } }
		 	],
		 	password: [
		 		{ required: true, message: '请输入密码' }
		 	],
		 	cellphone: [
		 		{ required: true, message: '请输入手机号' }
		 	]
		 }
	})
	
	onMounted(() => {
	
	})

	function doLogin(index) {
		if(_d.typeIndex != index) {
			formRef.value.resetFields();
			_d.typeIndex = index;
			return;
		}
		formRef.value.validate().then(() => {
			_d.btnLoading = true;
			ApiPost(_d.typeList[_d.typeIndex].api, _d.form).then(res => {
				notification.success({
					message: '提示',
					description: '登录成功'
				});
				userStore.setUserinfo(res.data);
				userStore.setToken(res.data.token);
				router.push({
					path: '/home'
				})
			}).finally(() => {
				_d.btnLoading = false;
			})
		})
	}

	// 倒计时
	function downTime() {
		if(_d.down.n > 0) {
			return;
		}
		formRef.value.validate(['cellphone']).then(() => {
			_d.down.n = 60;
			_d.down.t = setInterval(() => {
				_d.down.n--;
				if(_d.down.n <= 0) {
					clearInterval(_d.down.t);
				}
			}, 1000);
			ApiPost('/Web/getsmscode/'+_d.form.cellphone).then(res => {
				notification.success({
					message: '提示',
					description: '发送成功'
				});
			})
		})
	}

	function login() {
		validate().then(() => {
			_d.btnLoading = true;
			ApiPost("/Web/userlogin", _d.form).then(res => {
				notification.success({
					message: '提示',
					description: '登录成功'
				});
				userStore.setUserinfo(res.data);
				userStore.setToken(res.data.token);
				router.push({
					path: '/home'
				})
			}).finally(() => {
				_d.btnLoading = false;
			})
		})
	}

	// 显示忘记密码
	function showForget() {
		forgetModalRef.value.open();
	}

</script>

<style lang="less" scoped>
.login-wp {
	position: relative;
	height: 100vh;
	background: #fff;
	.top {
		position: absolute;
		top: 15px;
		left: 50%;
		width: 1400px;
		max-width: 78vw;
		transform: translate(-50%, 0);
		display: flex;
		align-items: center;
		font-size: 20px;
		.logo {
			margin-right: 20px;
			width: 40px;
		}
	}
	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1400px;
		height: 660px;
		max-width: 78vw;
		max-height: 82vh;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 12px 0 rgb(0 0 0 / 10%);
		display: flex;
		.left {
			width: 0;
			flex: 1;
			height: 100%;
			padding: 0 40px 50px 90px;
			display: flex;
			align-items: center;
			font-size: 20px;
			letter-spacing: 2px;
			font-family: '方正颜宋简体';
		}
		.right {
			position: relative;
			width: 580px;
			height: 100%;
			padding: 0 130px 0 90px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			&:before {
				content: '';
				position: absolute;
				top: 80px;
				bottom: 80px;
				left: 0;
				border-left: 1px solid #C4C4C8;
			}
			.t-form {
				width: 100%;
				.ipt {
					border-radius: 16px;
					height: 36px;
					.icon {
						margin-right: 6px;
						width: 14px;
					}
				}
				.btn {
					flex: 1;
					width: 0;
					height: 36px;
				}
			}
			.tip {
				padding-top: 20px;
				color: #aaa;
			}
		}
	}
}

@media screen and (max-width: 900px) {
	.login-wp {
		top {
			max-width: none;
			width: 90vw;
			margin-left: -45vw;
			transform: translate(0, 0);
		}
		.content {
			display: block;
			width: 90vw;
			height: 70vh;
			max-width: none;
			max-height: none;
			margin-top: -35vh;
			margin-left: -45vw;
			transform: translate(0, 0);
			.left {
				width: 100%;
				height: auto;
				padding: 40px 20px 20px;
			}
			.right {
				&:before {
					display: none;
				}
				width: 100%;
				height: auto;
				padding: 15px;
			}
		}
	}
}
</style>